<template>
  <div class="home">
    <HeaderBar></HeaderBar>
    <!--轮播图和热门视频-->
    <div class="home-top">
      <div class="carousel">
      <el-carousel :interval="4000" style="height:360px">
        <el-carousel-item v-for="(item, index) in sliderImage" :key="index" style="height:360px">
          <el-image :src="item.img | toCarouselUrl"
            style="width: 100%; height: 400px"
            fit="fill"
            @click="go(item.url)"
          ></el-image>
        </el-carousel-item>
      </el-carousel>
      </div>
      <!--热门视频-->
      <div class="popular">
        <PopularList></PopularList>
      </div>
    </div>
    <div style="width:240px;">
      <img class="title-img" src="../assets/title.png" />
      <span class="title">推荐</span>
    </div>
    <hr style="margin:0 80px;min-width: 1200px;">
    <div class="recommend">
      <RecommendList ref="child"></RecommendList>
      <div class="more">
        <el-button size="small" icon="el-icon-circle-plus-outline" round @click="getMore">加载更多</el-button>
      </div>
    </div>
    <el-footer class="footer">
      <p>Hi!弹幕 - 2021</p>
    </el-footer>
  </div>
</template>

<script>
import HeaderBar from "@/components/HeaderBar";
import PopularList from "@/components/PopularList"
import RecommendList from "@/components/RecommendList"
import { getCarouselList } from "@/api/carousel";
import { toCarouselUrl } from "@/utils/url";

export default {
  name: "Home",
  data() {
    return {
      sliderImage: [],
    };
  },
  methods: {
    _getCarouselList() {
      getCarouselList().then((res) => {
        if (res.data.code === 200) {
          this.sliderImage = res.data.data.data;
        }
      });
    },
    go(url) {
      if (url) {
        window.open(url, "_blank");
      }
    },
    getMore(){
      this.$refs.child.getMore();
    }
  },
  components: {
    HeaderBar,
    PopularList,
    RecommendList
  },
  created() {
    this._getCarouselList();
  },
  filters: {
    toCarouselUrl(name) {
      return toCarouselUrl(name);
    },
  },
};
</script>

<style scoped>
.home {
  background-color: #e9e9e9;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
}

.home-top{
  min-width: 1200px;
  margin: 20px 80px;
  height: 380px;
  white-space:nowrap
}

.carousel{
  width: 40%;
  float: left;
}

.popular{
  width: 55%;
  float: right;
}

.title-img{
  width: 80px;
  margin-left: 80px;
}

.title{
  font-size: 30px;
  line-height: 40px;
  color: #409EFF;
  margin: 12px 0 0 0;
  float: right;
}

.recommend{
  margin: 0 80px;
  min-width: 1200px;
  min-height: 500px;
}

.more {
  text-align: center;
}

.footer{
  height: 10px;
  background-color: #2d8cf0;
}

.footer>p{
  text-align: center;
  color: #fff;
  font-size: 20px;
}
</style>
